<template>
  <div class="base-echart">
    <div ref="echartRef" :style="{ width: width, height: height }"></div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, defineProps, withDefaults, watchEffect } from "vue"
// import type { EChartsOption } from "echarts"
import useEchart from "../hooks/useEchart"

// 定义 props 并设置默认值
const props = withDefaults(
  defineProps<{
    // options: EChartsOption  //报错（不影响运行）
    options: Object
    width?: string
    height?: string
  }>(),
  {
    width: "100%",
    height: "360px"
  }
)

const echartRef = ref<HTMLElement>()
onMounted(() => {
  const { setOptions } = useEchart(echartRef.value!)
  watchEffect(() => {
    setOptions(props.options)
  })
})
</script>

<style scoped lang="less"></style>
